<template>
  <div class="fillcontain">
    <div style="height: 10%; width: 100%">
      <headtop></headtop>
    </div>
    <div style="height: 18%; width: 100%">
      <el-row type="flex" class="row-bg" justify="center" style="height: 100%">
        <el-col :span="7"><div class="grid-content ">
          <img src="../assets/stu/pic_task_color_1.png" @click="handle1"/>
        </div></el-col>
        <el-col :span="1" class="arrow"><div>
        </div></el-col>
        <el-col :span="7"><div class="grid-content ">
          <img src="../assets/stu/pic_task_color_2.png" @click="handle2"/>
        </div></el-col>
        <el-col :span="1" class="arrow"><div>
        </div></el-col>
        <el-col :span="7"><div class="grid-content ">
          <img src="../assets/monitor/pic_task_color_3_1.png" @click="handle3"/>
        </div></el-col>
      </el-row>
    </div>
    <div class="contain">
      <el-row>
        <el-col :span="24">
          <div>
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </el-col>
      </el-row>
    </div>
      <!--<el-row class="foot">-->
        <!--<el-col :span="12">-->
          <!--<div class="refresh" @click="refresh" >-->
          <!--<img src="../assets/monitor/ico_refresh.png" style="vertical-align: middle;"/>   刷新-->
        <!--</div></el-col>-->
      <!--</el-row>-->
  </div>
</template>

<script>
  import headtop from '@/views_monitor/head.vue'
  import {handsUp, handsDown} from '@/api/api'
  export default {
    components: {
      headtop
    },
    data () {
      return {
        myUrl: '',
        state: {
          state: true
        },
        dialogFormVisible: false
      }
    },
    methods: {
      handle1 () {
        this.$router.push({path: '/monitor/explain'})
      },
      handle2 () {
        this.$router.push({path: '/monitor/textbook'})
      },
      handle3 () {
        this.$router.push({path: '/monitor/progress'})
      },
      refresh () {
        this.$router.go(0)
      },
      handsUp () {
        try {
          handsUp().then((res) => {
            this.state.state = false
            this.dialogFormVisible = false
          })
        } catch (err) {
          console.log('请求失败', err)
        }
      },
      handsDown () {
        try {
          handsDown().then((res) => {
            this.state.state = true
          })
        } catch (err) {
          console.log('请求失败', err)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    height: 100%;
  }
  .el-breadcrumb {
    margin-top: 5px;
  }
  .el-row {
    .arrow {
      img {
        margin-top: 38px;
        margin-left: -10px;
      }
    }
    .grid-content {
      border-radius: 4px;
      min-height: 100px;
      height: 50%;
      img {
        margin-top: 10px;
        width: 80%;
        height: 100%;
      }
    }
  }
  .contain {
    /*min-height: 500px;*/
    /*border: 1px solid #f2f2f2;*/  /*这个会导致按百分比调整页面出现问题
    /*margin-top: 20px;*/
    height: 72%;
    width: 100%;
  }
  .help-dialog {
    text-align: center;
    div {
      margin-top: 15px;
      .el-button{
        width: 280px;
      }
    }
  }
  .foot {
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    vertical-align: middle;
    line-height: 80px;
    div {
      min-height: 80px;
      border: 1px solid #dddddd;
      height: 100%;
      font-size: 22px;
      background: white;
    }
    .refresh {
      color: #fd8d00;
    }
    .ask {
      color: #89a6fc;
    }
  }
</style>
